<template>
  <div class="uni-search">
    <div class="uni-flex uni-row">
      <div class="uni-label">检索</div>
      <el-select
        v-model="searchName"
        filterable
        size="mini"
        remote
        clearable
        reserve-keyword
        placeholder="请输入姓名或工号"
        @change="userChange"
        :remote-method="remoteMethod"
        :loading="loading">
        <div slot="prefix">
          <div class="el-icon-search uni-icon"></div>
        </div>
        <el-option
          v-for="(item,index) in options"
          :key="index"
          :label="item.name"
          :value="index">
        </el-option>
      </el-select>
    </div>
    <div class="uni-flex uni-row">
      <div class="uni-label">楼宇</div>
      <el-select size="mini" v-model="activeBuildingId" filterable placeholder="请选择楼宇" @change="changeBuilding">
        <div slot="prefix">
          <div class="iconfont icon-dituguanli uni-icon"></div>
        </div>
        <el-option
          v-for="item in buildingList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
    <div class="uni-flex uni-row">
      <div class="uni-label">楼层</div>
      <el-select  size="mini" v-model="activeFloors" multiple filterable placeholder="请选择楼层" @change="changeFloors">
        <div slot="prefix">
          <div class="iconfont icon-floor uni-icon"></div>
        </div>
        <el-option
          v-for="item in floorList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
  import * as XcUtil from '@/utils/xcutil.js'
  export default {
    name: 'LoraSearch',
    data() {
      return {
        options: [],
        loading: false,
        searchName: [],
        activeBuildingId: '',
        activeFloors: []
      }
    },
    computed: {
      floorList()  {
        return this.$store.state.shopdata.floorList.filter((floorData)=>{
        	return floorData.buildingId == this.activeBuildingId && floorData.type != '楼顶'
        })
      },
      projectId() {
        return this.$store.state.config.projectId
      },
      buildingList() {
        return this.$store.state.shopdata.buildingList
      },
      onlineTime() {
        if (!this.$store.state.config.backParam.onlineTime){
          return 1200
        }
        return this.$store.state.config.backParam.onlineTime
      }
    },
    mounted() {
      setTimeout(()=>{
        var activeBuildingId = localStorage.getItem("activeBuildingId"+this.projectId) || '';
        var exist = false;
        for(var i=0; i<this.buildingList.length; i++) {
          if(this.buildingList[i].id == activeBuildingId) {
            exist = true;
            break;
          }
        }
        if(exist) {
          this.activeBuildingId = activeBuildingId;
        } else if(this.buildingList.length>0 ){
          this.activeBuildingId = this.buildingList[0].id;
        } else {
          this.activeBuildingId = "";
        }
        localStorage.setItem('activeBuildingId'+this.projectId, this.activeBuildingId)

        this.$nextTick(()=>{
          var activeFloorsStr = localStorage.getItem("activeFloors"+this.projectId);
          if (activeFloorsStr == undefined || activeFloorsStr == null) {
            if(this.floorList.length>0) {
              this.activeFloors = [this.floorList[0].id];
            } else {
              this.activeFloors = [];
            }
          } else {
            this.activeFloors = JSON.parse(activeFloorsStr);
          }
          if(this.activeFloors.length == 0) {
            this.changeBuilding(this.activeBuildingId);
          } else {
            this.changeFloors(this.activeFloors);
          }
        });
      },80)
    },
    methods: {
      changeBuilding(val){
        this.activeBuildingId = val
        localStorage.setItem('activeBuildingId'+this.projectId, val)
        this.$nextTick(()=>{
          var floorIds = this.floorList.map(item => {
            return item.id
          })
          this.changeFloors(floorIds);
        })
      },
      changeFloors(floorIds){
        this.activeFloors = floorIds
        localStorage.setItem('activeFloors'+this.projectId, JSON.stringify(floorIds))
        this.$emit("OnChangeFloors", this.activeBuildingId, floorIds)
      },
      userChange(e){
        if(e !== '') {
          var now = (new Date()).getTime()
          if(this.options[e].onlineTime && this.options[e].onlineTime !== '' && now - this.options[e].onlineTime < this.onlineTime * 1000 ) {
            this.showFloor(this.options[e].floorId)
            this.$emit("onShowUser", this.options[e])
          } else {
            this.$message.warning('该用户不在线');
          }
        }
      },
      showFloor(floorId){
        // for(var i=0; i<this.floors.length; i++) {
        //   if(this.floors[i].id === floorId) {
        //     // console.log(this.floors[i])
        //     this.activeBuilding = this.floors[i].buildingName
        //     this.activeFloors = [floorId]
        //     this.changeFloors(this.activeFloors)
        //     break;
        //   }
        // }
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          this.$http({
            url: '/lora/api/fuzzyUserList',
            method: 'get',
            params: {
              'keyWord': query,
              'limit': 10
            }
          }).then(({ data }) => {
            this.loading = false;
            if (data && data.success) {
              this.options = data.list || []
            } else {
              this.options = [];
            }
          })
        } else {
          this.options = [];
        }
      }
    }
  }
</script>
<style lang="less">
  .uni-search {
    .el-select>.el-input {
      width: 160px;
    }
  }
</style>
<style scoped lang="less">
  .uni-search {

    .uni-row {
      align-items: center;
      margin-bottom: 10px;
      .uni-label {
        width: 40px;
        text-align: center;
        color: #606266;
        font-size: 12px;
      }
      .uni-icon {
        color: #1d9d81;
        line-height: 28px;
        margin: 0 3px;
      }
    }
  }
</style>
